<!--能耗检测-->
<template>
    <div class="rightView">
        <transition name="animationRL">
            <div v-show="shows" style="display: flex;flex-direction: column">
                <div class="container">
                    <div class="container_title3">
                        <span>企业年度用电量对比</span>
                    </div>
                    <div  v-if="isLoading" class="container_text">
                        加载中
                    </div>
                    <div class="container_calendar" ref="electricityChart"></div>
                </div>
            </div>
        </transition>
        <div class="shrink" @click="shows=!shows"></div>
    </div>
</template>

<script>
import * as echarts from "echarts";
import {getAnnual} from "@/api/consumption/axios";

export default {
    name: "floatLeft",
    data() {
        return {
            shows: true,
            isLoading: true, // 初始化为加载中状态
        }
    },
    mounted() {
        //企业年度用电量对比
        // this.initElectricity()
        this.getElectricity()
    },
    beforeDestroy() {
    },
    methods: {
        //企业年度用电量对比
        getElectricity() {
            this.isLoading = true
            getAnnual()
                .then(res => {
                    if (res && res.value) {
                        this.initElectricity(res.value)
                        console.log(res.value, '企业年度用电量对比')
                    }
                })
                .finally(() => {
                    this.isLoading = false; // 请求完成后，不再显示加载中状态
                });
        },
        //企业年度用电量对比
        initElectricity(annualData) {
            const myEchart = echarts.init(this.$refs.electricityChart);
            let option = myEchart.getOption();
            if (option != null) {
                myEchart.clear();
                myEchart.setOption(option);
            }
            console.log(annualData, '企业年度用电量对比')
            let dataArr = []; // 添加当前年份的数据（250为例）
            let lastYearDataArr = []; // 添加去年的数据
            let xData = []
            let spaceLength = 5,
                fixedData = [],
                end = 8,
                max = 300;
            //
            // if (xData.length < 8) {
            //     end = xData.length - 1;
            // } else {
            //     end = 8;
            // }
            annualData.forEach(item => {
                dataArr.push(item.thisYear);
                lastYearDataArr.push(item.lastYear);
                xData.push(item.name);
            });
            option = {
                title: {
                    text: "单位（kw h）",
                    right: 0,
                    top: 20,
                    textStyle: {
                        color: 'rgba(255, 255, 255, 0.80)',
                        fontSize: '14',
                        fontWeight: 100,
                    },
                },
                grid: {
                    left: "1%",
                    right: "15%",
                    bottom: "1%",
                    top: "5%",
                    containLabel: true,
                },
                tooltip: {
                    trigger: "item",
                    backgroundColor: 'rgba(34, 40, 46, 0.7)',
                    borderWidth: "0", //边框宽度设置1
                    borderColor: "", //设置边框颜色
                    textStyle: {
                        color: '#fff',
                    },
                    axisPointer: {
                        type: "shadow",
                    },
                },
                legend: {
                    data: ['今年用电', '去年用电'],
                    textStyle: {
                        color: '#fff',
                    },
                    bottom: 10,
                    top: 20, // 设置图例距离顶部的距离
                    left: 10, // 设置图例距离左侧的距离
                    itemWidth: 12, // 设置图例项的宽度
                    itemHeight: 12, // 设置图例项的高度，与宽度相等
                    itemGap: 20,
                },
                xAxis: {
                    type: 'value',
                    axisLine: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                },
                yAxis: {
                    type: 'category',
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: '#363e83',
                        }
                    },
                    axisLabel: {
                        inside: false,
                        textStyle: {
                            color: 'rgba(255, 255, 255, 0.80)',
                            fontWeight: 'normal',
                            fontSize: '12',
                        },
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    data: xData
                },
                dataZoom: [
                    {
                        type: 'slider',
                        yAxisIndex: 0,
                        zoomLock: false,
                        width: 8,
                        show: false, // 将滚动条设置为隐藏
                        startValue: 0, // 从头开始。
                        endValue: end, // 一次性展示五个。
                        borderWidth: 0,
                        borderColor: 'transparent',
                        backgroundColor: '#343F4B',
                        fillerColor: '#4291CE',
                        showDataShadow: false,
                        brushSelect: false,
                        height: '20%',
                        handleStyle: {
                            color: '#4291CE',
                        },
                        handleIcon: 'path://M512 512m-320 0a320 320 0 1 0 640 0 320 320 0 1 0-640 0Z',
                    },
                ],
                series: [
                    {
                        name: '今年用电',
                        type: 'bar',
                        barWidth: '10%',
                        barGap: '40%', // 设置不同系列（今年用电和去年用电）之间的间距
                        label: {
                            show: true,
                            position: 'right',
                            formatter: '{c}',
                            color: '#fff'
                        },
                        itemStyle: {
                            normal: {
                                show: true,
                                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                    offset: 0,
                                    // 	color: "#1268f3" // 0% 处的颜色
                                    color: "rgba(0, 230, 255, 0)"
                                },
                                    {
                                        offset: 1,
                                        // 	color: "#01ccfe" // 100% 处的颜色
                                        color: 'rgba(0, 230, 255, 1)',
                                    }
                                ])
                            }
                        },
                        data: dataArr
                    },
                    {
                        name: '去年用电',
                        type: 'bar',
                        barWidth: '10%',
                        barGap: '40%', // 设置不同系列（今年用电和去年用电）之间的间距
                        label: {
                            show: true,
                            position: 'right',
                            formatter: '{c}',
                            color: '#fff'
                        },
                        itemStyle: {
                            normal: {
                                show: true,
                                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                    offset: 0,
                                    // 	color: "#1268f3" // 0% 处的颜色
                                    color: "rgba(255, 131, 46, 0)"
                                },
                                    {
                                        offset: 1,
                                        // 	color: "#01ccfe" // 100% 处的颜色
                                        color: 'rgba(255, 131, 46, 1)',
                                    }
                                ])
                            }
                        },
                        data: lastYearDataArr
                    }
                ]
            };

            // 自动滚动
            function autoMove() {
                setInterval(() => {
                    if (Number(option.dataZoom[0].endValue) === xData.length - 1) {
                        option.dataZoom[0].endValue = end;
                        option.dataZoom[0].startValue = 0;
                    } else {
                        option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
                        option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
                    }
                    myEchart.setOption(option);
                }, 1000);
            }

            autoMove();
            // myEchart.setOption(option);
        },

    }
}
</script>

<style lang="scss">

.height200 {
  width: 570px;
  height: 200px;
  display: flex;
  flex-direction: column;

  .el-scrollbar__wrap {
    overflow-x: hidden;
  }

  .el-scrollbar__thumb {
    background-color: #189DC5;
  }

  .el-scrollbar__bar {
    &.is-vertical {
      width: 2px; //滚动条宽度
    }
  }
}

.statistical-scrollbar {
  width: 220px;
  height: 130px;
  display: flex;
  flex-direction: column;

  .el-scrollbar__wrap {
    overflow-x: hidden;
  }

  .el-scrollbar__thumb {
    background-color: #189DC5;
  }

  .el-scrollbar__bar {
    &.is-vertical {
      width: 2px; //滚动条宽度
    }
  }
}

@media screen and (min-width: 1000px) and (max-width: 3000px) {
  $width_2k: 1920;
  $height_2k: 1080;
  $width: 4000;
  $height: 1486;
  $unit: px;
  @function calWidth_2k($pixel) {
    @return $width_2k*$pixel/$width;
  }
  @function calHeight_2k($pixel) {
    @return $pixel/1.8*2.7;
  }
  @function calFont_2k($pixel) {
    @return $height_2k*$pixel/$height;
  }
  .height200 {
    height: calHeight_2k(200px);

    .el-scrollbar__wrap {
    }

    .el-scrollbar__thumb {
    }

    .el-scrollbar__bar {
      &.is-vertical {
      }
    }
  }

  .statistical-scrollbar {
    height: calHeight_2k(130px);

    .el-scrollbar__wrap {
    }

    .el-scrollbar__thumb {
    }

    .el-scrollbar__bar {
      &.is-vertical {
      }
    }
  }
}
</style>
<style lang="scss" scoped>

.marginL21 {
  margin-left: 21px;
}

.marginL13 {
  margin-left: 6px;
}

.rightView {
  float: right;
  margin-top: 30px;
  display: flex;
  height: 630px;
  flex-direction: row;
  align-items: center;
  cursor: pointer;

  .shrink {
    width: 23px;
    height: 321px;
    background-size: 100% 100%;
    background-image: url("@/assets/icon_shrink_r.png");
  }

  .container {
    width: 400px;
    height: 620px;
    margin-top: 20px;
    padding-left: 22px;
    background-size: 100% 100%;
    display: flex;
    background-image: url("@/assets/bg_3_1.png");
    flex-direction: column;

    &_calendar {
      width: 375px;
      height: 580px;

    }
      &_text{
          width: 375px;
          height: 50px;
          line-height: 50px;
          text-align: center;
          font-size: 16px;
          color: #ababab;
      }

    &-titleBgc {
      width: 380px;
      height: 3px;
      background-size: 100% 100%;
      background-image: url("@/assets/bg_title.png");
    }

    &_title3 {
      width: 366px;
      height: 24px;
      margin-top: 20px;
        margin-left: 10px;
      display: flex;
      flex-direction: row;
      align-items: center;
        background-size: 100% 100%;
        background-image: url("@/assets/bg_title3.png");

      span {
        height: 24px;
        font-size: 13px;
        font-family: Source Han Sans SC;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 24px;
          margin-left: 11px;
        background: linear-gradient(0deg, #90CCFF 0%, #FAFAFB 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

    }

    &_intention {
      width: 238px;
      position: relative;
      height: 161px;

      &_line {
        width: 100%;
        height: 1px;
        background: #EEEBE9;
        opacity: 0.4;
      }

      &_bg {
        position: absolute;
        width: 238px;
        height: 161px;
        background: #19508E;
        opacity: 0.36;
      }

      &_title {
        text-align: center;
        width: 25%;
        height: 18px;
        line-height: 18px;
        font-size: 8px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #FFFFFF;
        opacity: 0.4;
      }

      &_type {
        width: 25%;
        height: 30px;
        line-height: 30px;
        font-size: 9px;
        font-family: Adobe Heiti Std;
        font-weight: normal;
        color: #FFFFFF;
      }

      &_num {
        width: 25%;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 8px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #FFFFFF;
      }
    }
  }

}

.trackContainer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;

  .track {
    width: 269px;
    height: 41px;
    margin-right: 5px;
    display: flex;
    margin-top: 5px;
    flex-direction: column;
    justify-content: center;
    background-size: 100% 100%;
    background-image: url("@/assets/bg_track.png");

    .icon {
      width: 14px;
      height: 14px;
      background-size: 100% 100%;
      background-image: url("@/assets/icon_track.png");
    }

    .name {
      margin-left: 7px;
      height: 14px;
      font-size: 10px;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: #1CFDFF;
      line-height: 14px;
    }

    .type {
      //white-space: nowrap;
      margin-top: 5px;
      height: 8px;
      font-size: 8px;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 8px;
      overflow: hidden; /* 控制超出部分隐藏 */
      word-break: break-all; /* 超出部分强制换行 */
    }
  }
}

.intentionStyle {
  width: 300px;
  height: 200px;
}

.intentionContainerPadding {
  padding: 10px 16px 0px 15px;
}

@media screen and (min-width: 1000px) and (max-width: 3000px) {
  $width_2k: 1920;
  $height_2k: 1080;
  $width: 4000;
  $height: 1486;
  $unit: px;
  @function calWidth_2k($pixel) {
    @return $width_2k*$pixel/$width;
  }
  @function calHeight_2k($pixel) {
    @return $pixel/1.8*2.7;
  }
  @function calFont_2k($pixel) {
    @return $height_2k*$pixel/$height;
  }
  .marginL21 {
    margin-left: calHeight_2k(6px);
  }

  .marginL13 {
    margin-left: calHeight_2k(6px);
  }

  .rightView {
    margin-top: calHeight_2k(30px);
    height: calHeight_2k(630px);
    position: relative;
    z-index: 3;

    .shrink {
      height: calHeight_2k(321px);
    }

    .container {
      height: calHeight_2k(620px);
      margin-top: calHeight_2k(20px);

      &_calendar {
        height: calHeight_2k(580px);
      }
        &_text{
            height: calHeight_2k(50px);
            line-height: calHeight_2k(50px);
        }

      &-titleBgc {
        height: calHeight_2k(3px);
      }

      &_title3 {
        height: calHeight_2k(24px);
        margin-top: calHeight_2k(20px);

        span {
          height: calHeight_2k(24px);
          line-height: calHeight_2k(24px);
        }

      }

      &_intention {
        height: calHeight_2k(161px);

        &_line {
          height: calHeight_2k(1px);
        }

        &_bg {
          height: calHeight_2k(161px);
        }

        &_title {
          height: calHeight_2k(18px);
          line-height: calHeight_2k(18px);
        }

        &_type {
          height: calHeight_2k(30px);
          line-height: calHeight_2k(30px);
        }

        &_num {
          height: calHeight_2k(30px);
          line-height: calHeight_2k(30px);
        }
      }
    }

  }

  .trackContainer {

    .track {
      height: calHeight_2k(41px);
      margin-top: calHeight_2k(5px);

      .icon {
        height: calHeight_2k(14px);
      }

      .name {
        height: calHeight_2k(14px);
        line-height: calHeight_2k(14px);
      }

      .type {
        margin-top: calHeight_2k(5px);
        height: calHeight_2k(8px);
        line-height: calHeight_2k(8px);
      }
    }
  }

  .intentionStyle {
    height: calHeight_2k(200px);
  }

  .intentionContainerPadding {
    padding-top: calHeight_2k(10px);
    padding-bottom: calHeight_2k(0px);
  }
}

</style>
